import { Form, Card, Button, Select } from 'antd';
import { WeaDialog, WeaNewScroll, WeaLocaleProvider } from 'ecCom';
import CarConstant from '../../../util/CarConstant';
import '../../../style/index';
import Apis from '../../../apis/car';

const getLabel = WeaLocaleProvider.getLabel;

const colors = ['#55D2D4', '#B37BFA', '#FFC62E', '#8DCE36', '#37B2FF', '#FF9537', '#FF5E56', '#FFC62E'];
const imgs = [
  'icon-New-Flow-Personnel-matters',
  'icon-New-Flow-contract',
  'icon-New-Flow-task',
  'icon-New-Flow-printing',
  'icon-New-Flow-summary',
  'icon-coms-task-list',
  'icon-coms-Paste',
  'icon-meeting-cycle',
];
class CreateCarFlowDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      carFlowData: {
        datas: [],
      },
      parms: {},
    };
  }

  render() {
    const { visible, carFlowData } = this.state;
    const { datas } = carFlowData;
    let colorIndex = 0;

    return (
      <WeaDialog
        ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4e2zjv`}
        className="car"
        style={{ width: 800, height: 500 }}
        visible={visible}
        title={getLabel(82290, '新增用车申请')}
        icon={CarConstant.iconClassName}
        iconBgcolor={CarConstant.iconBgColor}
        onCancel={this.back}
        buttons={[
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@31dxqv@back`} type="primary" onClick={this.back}>{getLabel(309, '关闭')}</Button>,
        ]}
      >
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@32jzmi`} ref="sc" height={500}>
          <div className="car-dialog-form">
            <div style={{ paddingTop: 20 }}>
              {
                datas.map((type, index) => {
                  const { flows, workflowtypeid, workflowtypename } = type;
                  const color = colors[colorIndex % (colors.length)];
                  const img = imgs[colorIndex % (colors.length)];
                  colorIndex++;
                  const icontype = `icon-base ${img}`;

                  return (
                    <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@5z6wcx@${index}`} id={workflowtypeid} className="clearfix" style={{ 'border-top-color': color, overflow: 'visible', background: '#fff', boxShadow: '0 1px 6px hsla(0,0%,39%,.2)' }}>
                      <div style={{ width: '100%', 'margin-bottom': '20px' }}>
                        <div className="one-card-title">
                          <div style={{ display: 'table', height: '100%', width: '100%' }}>
                            <div style={{ display: 'table-cell', padding: '5px 0 25px 0', textAlign: 'center' }}>
                              <div className="wf-card-type-name">
                                <span style={{ color, fontSize: 26, marginRight: 10 }}><i className={icontype} /></span>
                                <span style={{ height: 36, lineHeight: '36px' }}>{workflowtypename}{flows && (`(${flows.length})`)}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="one-card-content">
                          <ul>
                            {
                              flows.map((obj) => {
                                const { workflowid, workflowname } = obj;
                                return (
                                  <li>
                                    <div className="centerItem" key={workflowid} >
                                      <div className="fontItem" style={{ width: '60%' }}>
                                        <a onClick={this.onNewRequest.bind(this, workflowid, '', 0, 0)} target="_blank" title={workflowname}>{workflowname}</a>
                                      </div>
                                    </div>
                                  </li>
                                );
                              })
                            }
                          </ul>
                        </div>
                      </div>
                    </Card>
                  );
                })
              }
            </div>
          </div>
        </WeaNewScroll>
      </WeaDialog>
    );
  }


  // 新建流程
  onNewRequest(wfid) {
    let { cardid, startDate, startTime, endDate, endTime } = this.state.parms;
    if (cardid) {
      let parm = { startDate, startTime, endDate, endTime };
      Apis.getCarServerDateTime(parm).then(
        (result) => {
          startDate = result.startDate;
          startTime = result.startTime;
          endDate = result.endDate;
          endTime = result.endTime;
          parm = { workflowid: wfid };
          Apis.getCarFlowField(parm).then(
            (result1) => {
              jQuery.post('/workflow/request/AddWorkflowUseCount.jsp', { wfid });
              const paramstr = `workflowid=${wfid}&isagent=0&beagenter=0&f_weaver_belongto_userid=&f_weaver_belongto_usertype=0`;
              const parmsInit = `&${result1.carId}=${cardid}&${result1.startDate}=${startDate}&${result1.startTime}=${startTime}&${result1.endDate}=${endDate}&${result1.endTime}=${endTime}`;
              this.openFullWindowHaveBar(`/workflow/request/CreateRequestForward.jsp?${paramstr}${parmsInit}`);
            },
          );
        },
      );
    } else {
      // 计数
      jQuery.post('/workflow/request/AddWorkflowUseCount.jsp', { wfid });
      const paramstr = `workflowid=${wfid}&isagent=0&beagenter=0&f_weaver_belongto_userid=&f_weaver_belongto_usertype=0`;
      this.openFullWindowHaveBar(`/workflow/request/CreateRequestForward.jsp?${paramstr}`);
    }
  }

  openFullWindowHaveBar(url) {
    const redirectUrl = url;
    const width = screen.availWidth - 10;
    const height = screen.availHeight - 50;
    let szFeatures = 'top=0,';
    szFeatures += 'left=0,';
    szFeatures += `width=${width},`;
    szFeatures += `height=${height},`;
    szFeatures += 'directories=no,';
    szFeatures += 'status=yes,toolbar=no,location=no,';
    szFeatures += 'menubar=no,';
    szFeatures += 'scrollbars=yes,';
    szFeatures += 'resizable=yes'; // channelmode
    window.open(redirectUrl, '', szFeatures);
  }

  open = (results) => {
    this.setState({
      visible: true,
      carFlowData: results,
    });
  }

  back = () => {
    this.setState({
      visible: false,
    });
  }

  setParms = (parms) => {
    this.setState({
      parms,
    });
  }
  setParmsAndNewFlow = (parms, workflowid) => {
    this.setState({
      parms,
    }, () => { this.onNewRequest(workflowid); });
  }
}
export default CreateCarFlowDialog;
